<template>
  <div id="app">
    <router-view></router-view>
    <van-popup v-model="isCheckUpdate" class="CheckUpdate" :close-on-click-overlay='false' get-container="body">
      <div v-if="version.isUpdata">
        <div class="title">更新提示</div>
        <div class="content" v-html="version.versionDes"></div>
        <div class="button">
          <span class="gradient btn" @click="downloadApp">立即更新</span>
          <span class="cancel btn" v-if="!version.closed" @click="isCheckUpdate=false">取消</span>
        </div>
      </div>
      <div class="percent-flex" v-else>
        <div class="name">正在下载中 {{version.percent}}%</div>
        <div class="percent">
          <div class="progress" :style="'width:'+version.percent+'%'">
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      isCheckUpdate: false,
      firstPlayFlag: true,
      version: {
        percent: 0,
        source: '',
        isUpdata: true,
        closed: false,
        versionDes: '' // 更新描述
      }
    };
  },
  computed: {
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$tools.getQueryVariable('isApp');
      }
    }
  },
  provide () {
    return {
      reload: this.reload
    };
  },
  created () {
    this.isApp && this.setStatusBarStyle('dark');
  },
  mounted () {
    var _reloadRouterURL = localStorage.getItem('reloadRouterURL');
    if (_reloadRouterURL) {
      this.$router.push({ 'path': _reloadRouterURL });
    }
    var mam = window.api && window.api.require('mam');
    if (this.firstPlayFlag) {
      mam && mam.checkUpdate((ret, err) => {
        if (ret) {
          if (!ret.status) {
            this.$toast('服务器繁忙，请稍后再试');
            return;
          }
          if (ret.result.update) {
            var updateTip = ret.result.updateTip.replace(/\r\n/g, '<br>');
            this.version.versionDes = '<div class="newTitle">有新版本啦！</div><div class="p-content">最新版本:' + ret.result.version + '<br>' + updateTip.replace(/\n/g, '<br>') + '</div><div class="time">更新时间:' + ret.result.time + '</div>';
            this.isCheckUpdate = true;
            this.firstPlayFlag = false;
            this.version.source = ret.result.source;
            this.version.closed = ret.result.closed;
          }
        }
      });
    }
  },
  methods: {
    setStatusBarStyle (data) {
      // 设置状态栏颜色
      window.api && window.api.setStatusBarStyle({
        style: data,
        color: 'transparent'
      });
    },
    reload () {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
        setTimeout(() => {
          localStorage.removeItem('reloadRouterURL');
        }, 500);
      });
    },
    // 下载应用
    downloadApp (source) {
      var _this = this;
      _this.version.isUpdata = false;
      if (window.api.systemType === 'android') {
        window.api.download({
          url: _this.version.source,
          report: true
        }, function (retdownload, err) {
          if (retdownload && retdownload.state === 0) {
            _this.version.percent = Math.ceil(retdownload.percent); // 进度条
          }
          if (retdownload && retdownload.state === 1) { /* 下载完成 */
            _this.version.percent = 100;
            setTimeout(() => {
              var savePath = retdownload.savePath;
              // 下载完成销毁变量
              _this.version.source = '';
              _this.version.isUpdata = false;
              _this.version.closed = false;
              _this.version.versionDes = '';// 更新描述
              _this.isCheckUpdate = false;
              window.api.installApp({
                appUri: savePath
              });
            }, 400);
          }
        });
      }
    }
  }
};
</script>
